import { useEffect, useState } from "react"
import axios from "axios"

function Counter(props) {
  const [count, setCount] = useState(() => {
    return props.num ** 2  // es6 新增写法 **
    // return Math.pow(props.num, 2)
  })
  return (
    <button onClick={() => setCount(count + 1)}>{count}</button>
  )
}

function App() {
  const [name, setName] = useState(() => {
    return '牛牛'
  })

  const [list, setList] = useState([])
  // const [list, setList] = useState(async() => {
  //   const res = await axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#!method=get')      
  //   setList(res.data.data)
  // })


  useEffect(() => {
    async function fetchData() {
      const res = await axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#!method=get')      
      setList(res.data.data)
    }
    fetchData()
  }, []) // 传入空数组，只执行一次（缓存行为，哪怕整个App函数重新执行，useEffect也不会执行，相当于useEffect被缓存起来）

  console.log(list);

  return (
    <div>
      <h1>hello {name}</h1>
      <Counter num={10}/>

      <ul>
        {
          // Array.isArray(list) && list.map(item => {
          //   return <li key={item.name}>{item.name}</li>
          // })
          list.map(item => {
            return <li key={item.name}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}

export default App